<template>
  <el-container class="team-review-container">
    <el-header class="header">
      <h2>母校行队伍审核</h2>
    </el-header>
    <el-main class="survey-main">
      <el-form :inline="true" class="search-form">
        <el-form-item label="学院">
          <el-select v-model="selectedCollege" placeholder="请选择学院">
            <el-option label="全部" value="all"></el-option>
            <el-option label="计算机学院" value="计算机学院"></el-option>
            <el-option label="艺术学院" value="艺术学院"></el-option>
            <el-option label="体育学院" value="体育学院"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="队伍名称">
          <el-input v-model="teamName" placeholder="请输入队伍名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="displayedData" style="width: 100%" class="review-table">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="teamName" label="队伍名称" align="center"></el-table-column>
        <el-table-column prop="captainName" label="队长姓名" align="center"></el-table-column>
        <el-table-column prop="teamLeaderId" label="队员学号" align="center"></el-table-column>
        <el-table-column prop="college" label="学院" align="center"></el-table-column>
        <el-table-column prop="grade" label="年级" align="center"></el-table-column>
        <el-table-column prop="contactInfo" label="联系方式" align="center"></el-table-column>
        <el-table-column prop="joinTime" label="通过批次" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button v-if="scope.row.status === '审核中'" type="text" size="small" disabled>审核中</el-button>
            <el-button v-else-if="scope.row.status === '审核不通过'" type="text" size="small" disabled>审核不通过</el-button>
            <el-button v-else @click="review(scope.row)" type="text" size="small">审核</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-footer">
        <el-pagination
            background
            layout="prev, pager, next, jumper, total, sizes"
            :total="total"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40, 50]"
            @current-change="handlePageChange"
            @size-change="handleSizeChange"
        ></el-pagination>
      </div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { ElMessage } from 'element-plus';

const selectedCollege = ref('');
const teamName = ref('');
const tableData = ref([...Array(100).fill(null)].map((_, index) => ({
  index: index + 1,
  teamName: `武汉第${index}队`,
  captainName: `QIANJIAXIN${index + 1}`,
  teamLeaderId: `${10000 + index}`,
  college: index % 4 === 0 ? '计算机学院' : index % 4 === 1 ? '艺术学院' : '体育学院',
  grade: index % 2 === 0 ? '2023级' : '2024级',
  contactInfo: '15888888888',
  joinTime: index % 2 === 0 ? '2024年春季' : '2025年秋季',
  status: '待审核'
})));
const total = ref(100);
const pageSize = ref(10);
const currentPage = ref(1);

const displayedData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  let filtered = tableData.value;

  if (selectedCollege.value !== 'all' && selectedCollege.value !== '') {
    filtered = filtered.filter(item => item.college === selectedCollege.value);
  }

  if (teamName.value) {
    filtered = filtered.filter(item => item.teamName.includes(teamName.value));
  }

  return filtered.slice(start, end).map((item, index) => ({
    ...item,
    index: start + index + 1
  }));
});

const search = () => {
  currentPage.value = 1;
};

const reset = () => {
  teamName.value = '';
  selectedCollege.value = '';
  currentPage.value = 1;
};

const review = (row) => {
  console.log('审核', row);
  row.status = '审核中'; // 更新审核状态为审核中
  ElMessage.success('审核成功');
};

const handlePageChange = (page) => {
  currentPage.value = page;
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
};
</script>

<style scoped>
.team-review-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-family: 'Arial', sans-serif;
}

.header {
  background-color: #ffffff;
  padding: 4px;
  border-radius: 12px 12px 0 0;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.survey-main {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-table {
  width: 100%;
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.review-table th {
  background-color: #f0f8ff;
  font-weight: bold;
  color: #333;
}

.review-table td {
  font-size: 14px;
  color: #666;
}

.pagination-footer {
  text-align: right;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
  margin-left: auto;
  margin-right: auto;
}
</style>